import pDown from '@/images/common/down-center.png';
import pUp from '@/images/common/up-center.png';
import pUnselected from '@/images/cart/unselected.svg';
import { Image, View } from '@tarojs/components';
import React from 'react';
import ImageOrIcon from '@/components/ImageOrIcon';

import styles from './index.module.scss';

const SumPriceBottom = ({
  isOpened,
  onToggle,
  totalPrice,
  totalDiscountAmount,
  handleBuy,
  shopSelected,
  isAllSelected = false,
  onSelect
}) => {
  const [p1, p2] = (totalPrice ?? 0).toFixed(2).split('.');

  return (
    <View className={styles.SumPriceBottom}>
      <View className="price-info">
        <View className="select" onClick={(e) => {onSelect()}}>
          <ImageOrIcon
            {...{
              className: 'icon',
              name: isAllSelected && 'icon_chose',
              size: 30,

              src: pUnselected,
            }}
          />
          全选
        </View>

        <View className="total">
          <View className="label">合计：</View>
          <View className="value customePageStyle">
            <View className="unit customePageStyle">¥</View>
            <View className="num customePageStyle">
              <View className="p1">{p1}</View>
              <View className="p2">.{p2}</View>
            </View>
          </View>
        </View>

        {totalDiscountAmount > 0 && (
          <View className="discount" onClick={onToggle}>
            <View className="label">已优惠¥{totalDiscountAmount?.toFixed(2)}</View>

            {isOpened ? (
              <Image className="down-icon" src={pUp}></Image>
            ) : (
              <Image className="down-icon" src={pDown}></Image>
            )}
          </View>
        )}
      </View>

      <View className="buy-button customePageBackgroundStyle" onClick={handleBuy}>
        <View className="txt">结算{shopSelected?.length ? ` (${shopSelected?.length})` : ''}</View>
      </View>
    </View>
  );
};

export default SumPriceBottom;
